<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>订单派发
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="formInline" label-width="80px">
            <el-form-item label="归属OEM">
              <el-input
                v-model="formInline.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                readonly
                @focus="selectInstitution"
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="formInline.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构ID">
              <el-input
                v-model="formInline.orgUid"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>

            <el-form-item label="订单号">
              <el-input
                v-model="formInline.orderCode"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="formInline.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="发货状态">
              <el-select
                v-model="formInline.shipStatus"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="部分发货" value="2"></el-option>
                <el-option label="待发货" value="0"></el-option>
                <el-option label="已发货" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货方式">
              <el-select
                v-model="formInline.shipType"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="快递" value="0"></el-option>
                <el-option label="自提" value="1"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="物流状态">
              <el-select
                v-model="formInline.shipStatus"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="待发货" value="0"></el-option>
                <el-option label="已发货" value="1"></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            @click="queryPayActiveLists"
            v-if="isAuth('ordersentSearch')"
            >搜索</el-button
          >
          <el-button
            v-if="isAuth('ordersentReset')"
            style="margin-left: 10px"
            type=""
            @click="reset"
            >重置</el-button
          >
          <el-button
            v-if="totalNum > 0"
            type="primary"
            style="margin-left: 40px"
            @click="payActiveListExport"
            class="butt"
            >批量导出</el-button
          >
        </div>
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange"
          v-loading="listLoading"
        >
          <el-table-column type="selection" min-width="40"></el-table-column>
          <el-table-column
            prop="oemName"
            min-width="100"
            show-overflow-tooltip
            label="归属OEM"
          ></el-table-column>
          <el-table-column
            prop="toOfficeName"
            min-width="100"
            show-overflow-tooltip
            label="归属机构"
          ></el-table-column>
          <el-table-column
            prop="officeUid"
            min-width="100"
            show-overflow-tooltip
            label="机构名称"
          ></el-table-column>
          <el-table-column
            prop="officeUid"
            min-width="100"
            show-overflow-tooltip
            label="机构ID"
          ></el-table-column>

          <el-table-column
            prop="phone"
            min-width="110"
            label="手机号"
          ></el-table-column>
          <el-table-column
            prop="orderCode"
            min-width="250"
            label="订单号"
          ></el-table-column>
          <el-table-column
            prop="orderTime"
            min-width="155"
            label="下单时间"
          ></el-table-column>
          <!-- <el-table-column min-width="80" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == 1">支付宝</span>
              <span v-if="scope.row.payType == 2">余额</span>
              <span v-if="scope.row.payType == 3">微信</span>
              <span v-if="scope.row.payType == 4">线下支付</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" label="支付状态">
            <template slot-scope="scope">
              <span v-if="scope.row.payStatus == 0">未支付</span>
              <span v-if="scope.row.payStatus == 1">支付成功</span>
              <span v-if="scope.row.payStatus == 2">待确认</span>
              <span v-if="scope.row.payStatus == 3">支付失败</span>
            </template>
          </el-table-column> -->
          <el-table-column min-width="80" label="收货方式">
            <template slot-scope="scope">
              <span v-if="scope.row.shipType == 0">快递</span>
              <span v-if="scope.row.shipType == 1">自提</span>
            </template>
          </el-table-column>

          <el-table-column min-width="80" label="发货状态">
            <template slot-scope="scope">
              <div v-if="scope.row.payStatus == 1">
                <span v-if="scope.row.shipStatus == 0">待发货</span>
                <span v-if="scope.row.shipStatus == 1">已发货</span>
                <span v-if="scope.row.shipStatus == 2">部分发货</span>
              </div>
              <div v-else>---</div>
            </template>
          </el-table-column>
          <!-- <el-table-column  min-width="100" label="物流状态">
            <template slot-scope="scope">
              <span v-if="scope.row.shipStatus == 0">待发货</span>
              <span v-if="scope.row.shipStatus == 1">已发货</span>
            </template>
          </el-table-column> -->
          <el-table-column min-width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="queryProductSN(scope.row)"
                v-if="isAuth('distributionDetails')"
                >查看</el-button
              >
              <el-button
                size="small"
                type="text"
                v-if="scope.row.payType == 4 && scope.row.payStatus==2"
                @click="collection(scope.row)"
                >收款确认</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
    <!-- 确认收款弹框 -->
    <el-dialog
      title="收款确认"
      :visible.sync="dialogVisiblecol"
      width="400px"
      :before-close="handleClose"
    >
      <div>
        <div class="colList">
          <div class="title">订单号：</div>
          <div class="cont">{{payInfo.orderCode}}</div>
        </div>
        <div class="colList">
          <div class="title">收款账户：</div>
          <div class="cont">{{payInfo.accountName}}</div>
        </div>
        <div class="colList">
          <div class="title">收款账号：</div>
          <div class="cont">{{payInfo.accountNo}}</div>
        </div>
        <div class="colList">
          <div class="title">收款金额：</div>
          <div class="cont">{{payInfo.orderCode}}</div>
        </div>
        <div class="colList">
          <div class="title">支付截图：</div>
          <div>
            <div style="width: 150px; height: 200px; background: red">
              <img :src="payInfo.payImg" style="width:100%;height:100%" alt="">
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handConfirm">确认收款</el-button>
        <el-button  @click="handFail"
          >未收到款</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import Tree from "../tree/index";
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
import axios from "axios";
// 批量导出
import { exportFile } from "../../plugins/expord";
export default {
  data() {
    return {
      orderCode: "",
      payInfo: {
        orderCode: "",
        accountName: "",
        accountNo: "",
        amount: "",
        payImg: "",
      },
      payImg: "",
      dialogVisiblecol: false,
      showType: false,
      ids: "",
      distributeStatus: "",
      outOrderCode: "",
      officeUid: "",
      queryProductData: [],
      dialogVisible: false,
      jurisdiction: "",
      formInline: {
        orgUid:"",
        orderCode: "",
        phone: "",
        distributeStatus: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20,
        shipType: "",
        shipStatus: "",
        idList: [],
      },
      form: {
        name: "",
        names: "",
      },
      listLoading1: false,
      listLoading: false,
      dataTime: [],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: "",
      multipleSelection: [],
      Distribution: 0,
      from: false,
      soId: "",
      SelectData: [],
    };
  },
  components: {
    Tree,
  },
  created() {
    if(this.$route.query.status){
      this.formInline.shipStatus = "0"
    }
  },
  mounted() {
    this.queryPayActiveList(); //搜索  展示列表
    this.jurisdiction = localStorage.getItem("jurisdiction"); //获取权限字段
  },
  methods: {
    // 确认收到款
    handConfirm() {
      this.isMondy("0");
    },

    // 没有收到款
    handFail() {
      this.isMondy("1");
    },

    // 是否收款了
    isMondy(payStatus) {
      axios
        .post("api/mall/orderPayStatusConfirm", {
          orderCode: this.orderCode,
          payStatus,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.form.officeUid = data.uid;
      console.log(this.form.officeUid);
      //归属机构名字
      this.mechanism = data.name;
      this.formInline.officeUid = data.uid;
      // alert(this.formInline.officeUid)
    },
    // 重置
    reset() {
      this.formInline.orderCode = "";
      this.formInline.phone = "";
      this.formInline.distributeStatus = "";
      this.formInline.oemName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.formInline.page = 1;
      this.mechanism = "";
      this.formInline.shipType = "";
      this.formInline.shipStatus = "";
      this.formInline.officeName = "";
      this.formInline.expressName = "";
      this.formInline.expOrderCode = "";
      this.formInline.orgUid = ""
      this.dataTime = [];
      this.queryPayActiveList();
    },
    //查看按钮
    queryProductSN(val) {
      console.log(val.distributeStatus);
      //  shipType// 收货方式
      this.$router.push({
        name: "delivery",
        query: {
          shipType: val.shipType,
          shipStatus: val.shipStatus,
          orderCode: val.orderCode,
          statausBool: val.shipStatus,
        },
      });
    },
    // 收款确认弹框
    collection(val) {
      console.log(val);
      let id = val.id;
      this.orderCode = val.orderCode;
      axios
        .post("api/mall/getOrderPayStatusConfirm", { id })
        .then((res) => {
          console.log("账户值");
          console.log(res);
          this.payInfo.orderCode = res.data.data.orderCode;
          this.payInfo.accountName = res.data.data.accountName;
          this.payInfo.accountNo = res.data.data.accountNo;
          this.payInfo.amount = res.data.data.amount;
          this.payInfo.payImg = res.data.payImg;
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogVisiblecol = true;
    },
    //关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },

    // 展示列表
    queryPayActiveList() {
      this.SelectData = [];
      if (this.from == true) return;
      this.from = true;
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];

      if (localStorage.getItem("jurisdiction") == 0) {
        this.formInline.oemUid = localStorage.getItem("uid");
      }

      https.queryOrderAllot(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
          this.listLoading = false;
          this.from = false;
          return;
        }
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
        this.listLoading = false;
        this.from = false;
      });
    },

    handleSelectionChange(val) {
      this.SelectData = val;
    },
    //批量导出
    payActiveListExport() {
      if (this.SelectData.length > 0) {
        for (let i = 0; i < this.SelectData.length; i++) {
          //  let pl = { snUid: +this.SelectData[i].id };
          this.formInline.idList.push(+this.SelectData[i].id);
        }
      } else {
        this.formInline.idList = [];
      }
      var _this = this;
      exportFile(
        "/api/mall/orderAllot/excel/export",
        _this.formInline,
        "订单派发"
      );
    },

    //每页多少条数据
    handleSizeChange(val) {
      this.SelectData = [];
      this.formInline.number = val; //动态改变
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    queryPayActiveLists() {
      this.SelectData = [];
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    //当前页
    handleCurrentChange(val) {
      this.SelectData = [];
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.el_pl {
  margin-bottom: 10px;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  float: left;
  min-height: 20px;
  width: 100%;
  /* border-bottom: 1px solid #ccc; */
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  color: #409eff;
  border-color: #409eff;
}
.btn {
  float: right !important;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.text {
  color: #999;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.colList {
  display: flex;
  margin-bottom: 15px;
}
.title {
  width: 100px;
  text-align: right;
}
.el-form-item {
  height: 32px;
}
</style>
